<template>
    <div>
        <tabbar :msg="'/service'"></tabbar>
        <!-- 轮播图 -->
        <div style="padding-top: 50px;">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <div class="swipe-item bg1">
                        <div class="gradient-text">
                            <div>亿万补贴投入 诚挚招募代理</div>
                            <div>hundreds of millions of dollars in subsidies to recruit agents</div>
                            <div @click="$router.push('/business')">立即业务合作</div>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="service">
            <div class="title">客户服务</div>
            <div class="service_item">
                <div>产品支持</div>
                <div>专业研发团队，及时反馈合作商需求</div>
            </div>
            <div class="service_item bg2">
                <div>物料支持</div>
                <div>提供产品的营销课程及产需求品操作手册</div>
            </div>
            <div class="service_item bg3">
                <div>推广支持</div>
                <div>通过网络推广得到的资源全部免费转交给当地合作商</div>
            </div>
            <div class="service_item bg4">
                <div>市场支持</div>
                <div>提供产品的活动政策、营销推广、代理运营建议等</div>
            </div>
            <div class="service_item bg5">
                <div>客服支持</div>
                <div>7*24小时的技术支持</div>
            </div>
            <div class="service_item bg6">
                <div>方案支持</div>
                <div>为全国合作商提供行业解决方案支持</div>
            </div>
            <div class="service_item bg7">
                <div>培训支持</div>
                <div>为代理商提供在线培训课程</div>
            </div>
            <div class="service_item bg8">
                <div>资源支持</div>
                <div>为代理商提供大客户解决方案</div>
            </div>
        </div>
        <!--  -->
        <div>
            <div class="title">您的定制盈利模式</div>
            <div class="service_items">
                <div class="service_items_title">流水分佣</div>
                <div class="service_items_content">每笔支付可享微信、支付宝的流水返佣</div>
                <img src="../../images/business/9.png" alt="">
            </div>
            <div class="service_items">
                <div class="service_items_title">支付后广告</div>
                <div class="service_items_content">每笔支付都是一次流量曝光，代理商可自由对接广告主，由付呗进行专业化服务与投放，每1000次流量曝光，平均市场价50元收益。</div>
                <img src="../../images/business/10.png" alt="">
            </div>
            <div class="service_items">
                <div class="service_items_title">硬件售卖</div>
                <div class="service_items_content">配套齐全、功能强大的收银硬件，付呗蜻蜓、云音箱 收款王扫码台等硬件底价提供</div>
                <img src="../../images/business/11.png" alt="">
            </div>
            <div class="service_items">
                <div class="service_items_title">大客户定制</div>
                <div class="service_items_content">我们通过专业的技术团队帮客户完成互联网+的全新产业升级。除了开发成本费用，利润全部属于您</div>
                <img src="../../images/business/12.png" alt="">
            </div>
        </div>
              <!-- 在线申请 -->
      <div class="apply">
        <div class="title" style="color: #fff;">在线申请、仅需四步、简单快捷</div>
        <div class="apply_content">
          <div>
            <img src="../../images/business/icon6.png" alt="">
            <div>代理招商</div>
  
            <ul>
              <li>招商热线</li>
              <li>在线留言</li>
              <li>在线注册</li>
            </ul>
          </div>
          <div>
            <img src="../../images/business/icon7.png" alt="">
            <div>业务对接</div>
            <ul>
              <li>预约考试</li>
              <li>会议签约</li>
              <li>代理入驻</li>
            </ul>
          </div>
          <div><img src="../../images/business/icon8.png" alt=""><img src="" alt="">
            <div>系统培训</div>
            <ul>
              <li>会员培训</li>
              <li>视频培训</li>
              <li>商学院</li>
            </ul>
          </div>
          <div>
            <img src="../../images/business/icon9.png" alt="">
            <div>售后支持</div>
            <ul>
              <li>技术支持</li>
              <li>渠道支持</li>
              <li>运营支持</li>
            </ul>
          </div>
        </div>
      </div>
        <!-- 底部 -->
        <footers></footers>
    </div>
</template>
<script>
import tabbar from "@/components/tabbar";
import footers from "@/components/footer";
export default {
    name: 'home',
    components: {
        tabbar, footers
    }
}
</script>
<style scoped lang="scss">
.swipe-item {
    height: 152px;
    background: url('../../images/home/bg1.png') no-repeat center;
    background-size: cover;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
    // line-height: 152px;
    position: relative;
}

.bg1 {
    background: url('../../images/business/bg1.png') no-repeat center;
    background-size: cover;
}

// .bg2 {
//     background: url('../../images/home/bg2.png') no-repeat center;
//     background-size: cover;
// }

// .bg3 {
//     background: url('../../images/home/bg3.png') no-repeat center;
//     background-size: cover;
// }

.gradient-text {
    width: 100%;
    // background: #fff;
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    div:nth-child(2) {
        font-size: 12px;
    }
    div:nth-child(3) {
        display: inline-block;
        padding: 3px 10px;
        font-size: 12px;
        margin-top: 10px;
        color: #fff;
        background: #0051C4;
        border-radius: 35px;
    }
    /* font-size: 58px; */
    /* Adjust font size as needed */
}

::v-deep .van-swipe__indicator {
    width: 12px;
    height: 2px;
    border-radius: 0;
}

.service {
    padding: 0 12px;

    // margin-top: 10px;
    .service_item {
        width: 100%;
        height: 91px;
        margin: 0 auto;
        background: url('../../images/business/1.png') no-repeat center;
        background-size: cover;
        margin-bottom: 10px;
        padding-left: 116px;
        padding: 15px 15px 15px 116px;
        box-sizing: border-box;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #333333;

        div:last-child {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            margin-top: 10px;
        }
    }

    .bg2 {
        background: url('../../images/business/2.png') no-repeat center;
        background-size: cover;
    }

    .bg3 {
        background: url('../../images/business/3.png') no-repeat center;
        background-size: cover;
    }

    .bg4 {
        background: url('../../images/business/4.png') no-repeat center;
        background-size: cover;
    }

    .bg5 {
        background: url('../../images/business/5.png') no-repeat center;
        background-size: cover;
    }

    .bg6 {
        background: url('../../images/business/6.png') no-repeat center;
        background-size: cover;
    }

    .bg7 {
        background: url('../../images/business/7.png') no-repeat center;
        background-size: cover;
    }

    .bg8 {
        background: url('../../images/business/8.png') no-repeat center;
        background-size: cover;
    }
}

.title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    // margin: 24px 0 20px 0;
    padding: 24px 0 20px 0;
    text-align: center;
}

.service_items {
    text-align: center;

    .service_items_title {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
    }

    .service_items_content {
        font-family: PingFang SC;
        font-weight:400;
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
    }

    img {
        width: 90%;
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
    }
}
/* 在线申请 */
.apply {
    width: 100%;
    /* height: 410px; */
    /* background-color: rgba(0, 0, 0, 0.5); */
    background: url("../../images/business/bg3.png") no-repeat;
    background-size: cover;
    background-position: center center;
    padding:20px 0 20px 0;
    box-sizing: border-box;
}

.apply_content {
    width: 90%;
    max-width: 1128px;
    margin: 10px auto;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    border-radius: 10px;
    padding: 30px 0;
    flex-wrap: wrap;
    justify-content: space-between;
}

.apply_content>div {
    width: 48%;
    margin-top: 10px;
}

.apply_content>div>img {
    width: 40px;
    margin: 0 auto;
    display: block;
    /* mar */
}

.apply_content>div>div {
    text-align: center;
    margin-top: 10px;
    color: #333333;
    font-size: 14px;
    position: relative;
    margin-bottom: 10px;
}

.apply_content>div>div::after {
    content: "1";
    position: absolute;
    top: -2px;
    left: 23%;
    font-size: 18px;
    color: #0271EF;
    font-weight: 700;
}

.apply_content>div:nth-child(2)>div::after {
    content: "2";
}

.apply_content>div:nth-child(3)>div::after {
    content: "3";

}

.apply_content>div:last-child>div::after {
    content: "4";

}

.apply_content>div>ul {
    margin-left: 32%;
    font-size: 12px;
    line-height: 25px;
    color: #666666;
    // list-style-type:none;
    // text-align: center;
}
</style>